<template>
  <section style="border:1px solid #c3c3c3;padding:10px;">
    <el-row :gutter="20" justify="center">
      <el-col :span="24/xcchart_layout_innerspan.pcvalue" v-for="(item, index) in sr.dimlables" :key="index">
        <div class="xp-title">{{sr.dimlables[index]}}</div>
        <div class="xp-content">{{sr.facts[0][index]}}</div>
      </el-col>
    </el-row>
  </section>

</template>

<script>
  import {
    debounce
  } from 'throttle-debounce'
  import * as echarts from 'echarts';
  import {
    xcflowGenerateRequestUrl
  } from '@/utils/xcflow';

  export default {
    props: {
      xcchart_base_xctitle: {
        type: Object
      },
      xcchart_prop_hidden: {
        type: Object
      },
      xcchart_layout_span: {
        type: Object
      },
      xcchart_data_dim: {
        type: Object
      },
      xcchart_data_facts: {
        type: Object
      },
      xcchart_layout_innerspan: {
        type: Object
      }
    },
    watch: {
      'xcchart_layout_span': {
        handler(newVal, oldVal) {
          let that = this;
        },
      },
      'xcchart_data_dim': {
        handler(newVal, oldVal) {
          let that = this;
          that.xinit();
        },
        deep: true,
      },
      'xcchart_data_facts': {
        handler(newVal, oldVal) {
          let that = this;
          that.xinit();
        },
        deep: true,
      },
    },
    data() {
      return {
        setOptionDebounce: debounce(340, this.setOption),
        sr: {
          dimlables: [],
          facts: [],
        },
      }
    },
    mounted() {
      let that = this;
      that.xinit();
    },
    destroyed() {

    },
    methods: {
      xinit() {
        let that = this;
        that.setOptionDebounce()
      },
      setOption() {
        let that = this;
        let url = xcflowGenerateRequestUrl(this, "getXcchartOptions");
        let method = 'post';
        that.$axios({
          method,
          url,
          data: {
            xcchart_data_dim: that.xcchart_data_dim,
            xcchart_data_facts: that.xcchart_data_facts
          }
        }).then(resp => {
          that.sr.dimlables = resp.data.data.dimlables;
          that.sr.facts = resp.data.data.facts;
        });
      }
    },
  }
</script>
<style>
  .el {
    padding-left: 10px;
  }

  .xp-title {
    text-align: center;
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    font-size: 19px;
  }

  .xp-content {
    text-align: center;
    font-size: 30px;
  }
</style>
